<template>
	<view class="index_content">
		<view class="index_tab">
			<u-sticky bgColor="#14aef9" style="padding-top: 50px;">
			    <u-tabs :list="list"
					:scrollable="false"
					lineColor="#ffffff"
					:activeStyle="{
						color: '#ffffff',
						fontWeight: 'bold'
					}"
					:inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}"
					@change="changetab"
				></u-tabs>
			</u-sticky>
		</view>
		<view style="padding: 10px 10px 0 10px;display: flex;justify-content: space-between;">
			<view style="width: 100%;margin-right: 20px;" @click="change_search">
				<u--input
					placeholder="搜索"
					prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399;"
					v-model="search_data"
					shape="circle"
				></u--input>
			</view>
			<view v-if="flag==1" @click="goFilterCartoon">
				<image src="../../static/guolv.png" style="width: 35px;height: 35px;"></image>
			</view>
		</view>
		<view class="manhua" v-show="flag==1">
			<view class="manhuaswiper" style="padding: 5px;" v-if="swipermanhualist[0]">
				<u-swiper
					:list="manhuaswiper"
					keyName="image"
					showTitle
					:autoplay="true"
					circular
					indicator
					height="200"
					@click="handleSwiper"
				></u-swiper>
			</view>
			
			<view class="recommed" style="padding-top: 10px;" v-if="daymanhualist[0]">
				<view style="color: black;font-size: 18px;padding-left: 5px;font-weight: 700;">
					今日推荐
				</view>
				<view style="display: flex;justify-content: flex-start;overflow: scroll;margin-top: 5px;">
					<ManhuaItem v-for="manhua in daymanhualist" :key="manhua.id" :manhua="manhua"></ManhuaItem>
				</view>
			</view>
			<view class="recommed" v-if="weekmanhualist[0]">
				<view style="color: black;font-size: 18px;padding-left: 5px;font-weight: 700;">
					本周热推
				</view>
				<view style="display: flex;justify-content: flex-start;overflow: scroll;margin-top: 5px;">
					<ManhuaItem v-for="manhua in weekmanhualist" :key="manhua.id" :manhua="manhua"></ManhuaItem>
				</view>
			</view>
			<view class="recommed" v-if="newmanhualist[0]">
				<view style="color: black;font-size: 18px;padding-left: 5px;font-weight: 700;">
					最新上架抢先看
				</view>
				<view style="display: flex;justify-content: flex-start;overflow: scroll;margin-top: 5px;">
					<ManhuaItem v-for="manhua in newmanhualist" :key="manhua.id" :manhua="manhua"></ManhuaItem>
				</view>
			</view>
		</view>
		<view class="essay_list" v-if="flag==2">
			<u-loading-page :loading="loading2" bg-color="gray"></u-loading-page>
			<EssayItem v-for="essay in essayList" :key="essay.essayId" :essay="essay"></EssayItem>
		</view>
	</view>
</template>

<script>
	import api from '../../api/config.js'
	
	import ManhuaItem from '../../components/manhuaItem.vue'
	import EssayItem from '../../components/essayItem.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				list: [
					{name: '漫画'},
					{name: '文章'}
				],
				flag: 1,
				essayList: [],
				status: 'loadmore',
				loading1: true,
				loading2: false,
				search_data: '',
				api: api,
				swipermanhualist: [],
				daymanhualist: [],
				weekmanhualist: [],
				newmanhualist: []
			}
		},
		components: {
			ManhuaItem,
			EssayItem
		},
		onLoad() {

		},
		mounted() {
			let username = uni.getStorageSync('username')
			if(username){
				console.log('已登录')
				uni.request({
					url:api + '/get_recommend_cartoon/',
					method:'POST',
					data:{
						recommendType: 'swiper',
					},
					success:res=>{
						this.swipermanhualist = res.data.cartoonData
					}
				})
				uni.request({
					url:api + '/get_recommend_cartoon/',
					method:'POST',
					data:{
						recommendType: '今日推荐',
					},
					success:res=>{
						this.daymanhualist = res.data.cartoonData
					}
				})
				uni.request({
					url:api + '/get_recommend_cartoon/',
					method:'POST',
					data:{
						recommendType: '本周热推',
					},
					success:res=>{
						this.weekmanhualist = res.data.cartoonData
					}
				})
				uni.request({
					url:api + '/get_recommend_cartoon/',
					method:'POST',
					data:{
						recommendType: '最新上架',
					},
					success:res=>{
						this.newmanhualist = res.data.cartoonData
					}
				})
			}else{
				console.log('未登录')
				uni.redirectTo({
					url:'/pages/login/login'
				})
			}
		},
		methods: {
			handleSwiper(val) {
				// 增加浏览历史
				let now_time = (new Date(Date.now())).toLocaleString()
				uni.request({
					url:api + '/mobile_add_history/',
					method:'POST',
					data:{
						username: uni.getStorageSync('mobile'),
						cartoonName: this.swipermanhualist[val].cartoonName,
						cartoonImg: this.swipermanhualist[val].cartoonImg,
						readTime: now_time,
					}
				})
				uni.navigateTo({
					url:'/pages/manhua/manhua?cartoonName=' + this.swipermanhualist[val].cartoonName
				})
			},
			goFilterCartoon() {
				uni.navigateTo({
					url:'/pages/filtercartoon/filtercartoon'
				})
			},
			change_search() {
				uni.navigateTo({
					url:'/pages/search/search?searchtype=' + this.flag
				})
			},
			clickBt() {
				uni.request({
					url: api + "/get_all_essay/",
					success:res=>{
						console.log(res.data)
					}
				})
			},
			changetab(val) {
				if(val.name == "漫画"){
					this.flag = 1
				}
				if(val.name == "文章"){
					this.loading2 = true
					this.flag = 2
					uni.request({
						url: api + "/get_all_essay/",
						method:'GET',
						success:res=>{
							this.essayList = res.data.data
							this.loading2 = false
						}
					})
				}
			}
		},
		computed: {
			manhuaswiper() {
				let manhuaswiper = []
				this.swipermanhualist.forEach(val => {
					manhuaswiper.push({
						image: api + val.cartoonImg,
						title: val.cartoonName
					})
				})
				return manhuaswiper
			}
		}
	}
</script>

<style>
	.img{
		transform: scale(0.2);
	}
	.index_content {
		/* padding-top: 50px; */
	}
	.index_tab{
		position: sticky;
		top: 0;
		z-index: 999;
	}
	.text-area {
		
	}
	.manhua{
		padding: 10px 5px 10px 5px;
	}
	.recommed{
		/* padding: 5px; */
		margin-top: 5px;
		padding-left: 5px;
		padding-right: 5px;
	}
	.essay_list{
		padding: 5px 0 10px 0;
		background-color: rgb(245, 245, 245);
	}
</style>
